<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>投票列表</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
	<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
	<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
	<link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
	<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
	<script src="./js/vote.js"></script>

</head>
<body>
<div id="app">

	<vote @find="query">
		<div id="vote" class="wrap">
			<h2>投票列表</h2>
			<ul class="list">


				<li  v-for=" (v,i) in votes " :class="i%2==0? 'odd' : ''" >
					<h4>
						<a :href="'view.html?id=' + v.id">{{v.vname}}</a>
					</h4>
					<div class="join"><a :href="'vote.html?id=' + v.id">我要参与</a></div>
					<p class="info">共有 {{v.items.length}} 个选项，已有 {{v.unum}} 个网友参与了投票。</p>
				</li>


			</ul>


			<el-pagination
					background
					layout="prev, pager, next"
					:total="total"
			         :page-size="size"
			         @current-change="pageQuery">
			</el-pagination>
		</div>
	</vote>


</div>


<script>
	var v = new Vue({
		el : "#app",
		data : {
			votes : [],
			total : 0,
			page : 1,
			size : 5
		},
		created() {
			// axios.get("/vote/vote/query").then(res => {
			// 	this.votes = res.data;
			// })
			let keywords = localStorage.getItem("keywords");
			localStorage.removeItem("keywords");
			this.query(keywords|| "");
		},
		methods : {
			query(words) {
				if(/^\s*$/.test(words)){
					words = "";

				}
				axios.get("/vote/vote/query?vname="+words+
						"&page="+this.page+
						"&size="+this.size).then(res => {
					this.votes = res.data.rows;
					this.total = res.data.total;
				})

			},
			pageQuery(page) {
				this.page = page;
				this.query("");
			}
		}
	})
</script>

</body>
</html>
